<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>
    const p = {
      firstName: 'A',
      lastName: 'B'
    }

    /* 
    要给p对象添加一个fullName属性, 要求:
    1. 组成: firstName-lastName
    2. 如果修改了firstName或lastName, fullName同步变化
    3. 如果更新了fullName, firstName和lastName也同步变化
    */
    // p.fullName = p.firstName + '-' + p.lastName

    // 使用Object.defineProperty()来给对象添加带getter和setter的属性
    Object.defineProperty(p, 'fullName', { // 配置对象: 属性名是特定的  config/options
      // 属性的get方法称为getter
      // 回调函数: 时机: 当读取属性时调用, 作用: 计算返回属性值, this: 当前对象
      get () {
        console.log('getter')
        return this.firstName + '-' + this.lastName
      },
      // 属性的set方法称setter
      // 回调函数: 时机: 当修改属性值时调用, 作用: 监视属性值的变化的, this: 当前对象
      // value就是最新的值 
      // set: 代表当设置了新的属性值时自动调用, 不是用来设置属性值的
      set (value) { // E-F
        console.log('setter')
        // 更新firstName和lastName
        const names = value.split('-')
        this.firstName = names[0]
        this.lastName = names[1]
      }  
    })

    console.log(p.fullName) // 读取属性值

    p.fullName = 'E-F'
    console.log(p.firstName, p.lastName)

    p.firstName = 'C'
    p.lastName = 'D'
    console.log(p.fullName) // C-D
    

    /* 
    判断回调函数?: 
      你定义
      你不直接调用
      但最终会执行
      setTimeout(() => {}, 1000)
      [1, 2].forEach(function (item, index) {})
    回调函数的几个问题?
      什么时候调用?
      函数中this是谁?
      函数执行的作用是什么?
    */
  </script>
</body>
</html>